<template>
  <div class="wrap">
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        :collapse="isCollapse"
        router
        class="el-menu-vertical-demo"
        default-active="2"
        style="height: 100vh;"
        text-color="#fff"
        :unique-opened="true"
      >
        <h1 class="logo f16">
          <img class="mr10" src="@/assets/imgs/logo.png" alt="">
          <span v-if="!isCollapse">十方智育</span>
        </h1>
        <el-menu-item index="/">
          <el-icon><Menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1" v-if="showRole">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
        
          <el-menu-item index="/sysUserManagement">系统用户管理</el-menu-item>
          <el-menu-item index="/UserManagement">普通用户管理</el-menu-item>
          <el-menu-item index="/publicityManagement">公告管理</el-menu-item>
          <el-menu-item index="/CompanyManagement">公司信息</el-menu-item>
        </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><location /></el-icon>
          <span>心理管理</span>
        </template>
        <el-menu-item index="/heart/psychometric">心理测评管理</el-menu-item>
        <el-menu-item index="/heart/heartknowledge">心理知识</el-menu-item>
        <el-menu-item index="/heart/question">心理答疑管理</el-menu-item>
        <el-menu-item index="/heart/reply">心理回复管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Notebook /></el-icon>
          <span>文章管理</span>
        </template>
        <el-menu-item index="/artic/article">文章信息管理</el-menu-item>
        <el-menu-item index="/artic/type">文章分类管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><MagicStick /></el-icon>
          <span>公益中心</span>
        </template>
        <el-menu-item index="/artic/free">公益中心信息</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="5" v-if="showRole">
          <template #title>
            <el-icon><location /></el-icon>
            <span>师资管理</span>
          </template>
          <el-menu-item index="/ConsultManagement">咨询师管理</el-menu-item>
          <el-menu-item index="/consult/consultlevel">咨询师等级管理</el-menu-item>
          <el-menu-item index="/ConsultManagement/Specilty">擅长领域管理</el-menu-item>
          <el-menu-item index="/ConsultManagement/changeType">收费分类管理</el-menu-item>
          <el-menu-item index="/ConsultManagement/charge">收费标准管理</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="6">
        <template #title>
          <el-icon><DataAnalysis /></el-icon>
          <span>课程管理</span>
        </template>
        <el-menu-item index="/course/course">课程信息管理</el-menu-item>
        <el-menu-item index="/course/coursetype">课程分类管理</el-menu-item>
        <el-menu-item index="/course/coursemark">课程评价管理</el-menu-item>
        <el-menu-item index="/course/courseorder">课程订阅管理</el-menu-item>
        <el-menu-item index="/course/coursetalk">课程交流管理</el-menu-item>
        <el-menu-item index="/course/coursereply">课程交流回复管理</el-menu-item>
        <el-menu-item index="/course/fm">课程音频管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="7">
          <template #title>
            <el-icon><location /></el-icon>
            <span>咨询/评价管理</span>
          </template>
          <el-menu-item index="/inquiryManagement/consulationAppointment">咨询预约管理</el-menu-item>
          <el-menu-item index="/consulationReplyManagement">咨询回复管理</el-menu-item>
          <el-menu-item index="/userFeekbackManagement">用户评价管理</el-menu-item>
          
      </el-sub-menu>
      </el-menu>
    <main>
      <header class="header bgfff">
        <div @click="isCollapse=!isCollapse">
          <el-icon  v-if="!isCollapse"><Fold /></el-icon>
          <el-icon v-else><Expand /></el-icon>
        </div>
        
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img class="avatar" :src="url+srcName" alt="">
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="center">个人中心</el-dropdown-item>
              <el-dropdown-item>布局设置</el-dropdown-item>
              <el-dropdown-item command="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </header>
      <div class="p10 bgfff m10 router">
        <RouterView/>
      </div>
    </main>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { onMounted } from 'vue';

const router = useRouter();

const isCollapse = ref(false) 

const userInfo = ref({});
const url = ref('http://localhost:8080/file/downLoad?fileName=')
const srcName = ref('')
const showRole = ref(false)

onMounted(()=>{
  getUserInfo(); 
  // console.log(url.value+srcName.value);
})

const getUserInfo=()=>{
  userInfo.value = localStorage.getItem('userInfo');
  // console.log(userInfo.value);
  userInfo.value = JSON.parse(userInfo.value);
  srcName.value = userInfo.value.img
  // console.log(userInfo.value.role);
  if(userInfo.value.role == 1){
    showRole.value = true;
  }else{
    showRole.value = false;
  }
}

const handleCommand=cmd=>{
  console.log('cmd',cmd);
  switch(cmd){
    case 'exit':
      //退出登录清楚本地存储
      localStorage.clear();
      router.replace('/login');
      break;
    case 'center':
      router.replace('/system/center');
      break;
  }
}

</script>
<style scoped>
.wrap{display: flex;height: 100vh;overflow-y: auto}
.logo{color: #fff;display: flex;align-items: center;padding: 10px 0;justify-content: center;}
.logo img{height: 40px;}
main{flex-grow: 1;width: 0;}
.header{padding: 15px;display: flex;justify-content: space-between;box-shadow: 0 1px 2px #999;}
.header .avatar{height: 36px;}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.router{border-radius: 10px;overflow-y: auto; height: 89vh}
</style>
